<template>
  <div 
    class="notification-item" 
    :class="{ 'unread': !notification.isRead }"
    @click="handleClick"
  >
    <div class="notification-avatar" v-if="notification.sender">
      <img 
        :src="notification.sender.avatar || '/avatar-placeholder.png'" 
        :alt="notification.sender.nickname"
      >
    </div>
    <div class="notification-content">
      <div class="notification-title">
        {{ notification.title }}
      </div>
      <div class="notification-text">
        {{ notification.content.split('|LINK|')[0] }}
      </div>
      <div class="notification-time">
        {{ formatTime(notification.createTime) }}
      </div>
    </div>
    <div class="notification-actions">
      <button 
        class="notification-btn" 
        @click.stop="markAsRead"
        v-if="!notification.isRead"
      >
        标为已读
      </button>
      <button 
        class="notification-btn danger" 
        @click.stop="deleteNotification"
      >
        删除
      </button>
    </div>
  </div>
</template>

<script>
import { useNotificationStore } from '../stores/notification';
import { useRouter } from 'vue-router';

export default {
  name: 'NotificationItem',
  props: {
    notification: {
      type: Object,
      required: true
    }
  },
  setup() {
    const notificationStore = useNotificationStore();
    const router = useRouter();
    
    return {
      notificationStore,
      router
    };
  },
  methods: {
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const diff = Math.floor((now - date) / 1000);
      
      if (diff < 60) return '刚刚';
      if (diff < 3600) return Math.floor(diff / 60) + '分钟前';
      if (diff < 86400) return Math.floor(diff / 3600) + '小时前';
      if (diff < 604800) return Math.floor(diff / 86400) + '天前';
      
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    async markAsRead() {
      await this.notificationStore.readNotification(this.notification.id);
      this.$emit('update');
    },
    async deleteNotification() {
      await this.notificationStore.removeNotification(this.notification.id);
      this.$emit('update');
    },
    handleClick() {
      if (!this.notification.isRead) {
        this.markAsRead();
      }
      
      // 如果有链接，跳转到对应页面
      const linkParts = this.notification.content.split('|LINK|');
      if (linkParts.length > 1 && linkParts[1]) {
        this.router.push(linkParts[1]);
      }
    }
  }
}
</script>

<style scoped>
.notification-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-item.unread {
  background-color: #f0f7ff;
}

.notification-item.unread:before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1677ff;
}

.notification-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.notification-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.notification-text {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-time {
  font-size: 0.8rem;
  color: #999;
}

.notification-actions {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.notification-item:hover .notification-actions {
  opacity: 1;
}

.notification-btn {
  padding: 4px 8px;
  font-size: 0.8rem;
  border: none;
  background-color: #f0f0f0;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}

.notification-btn:hover {
  background-color: #e0e0e0;
}

.notification-btn.danger {
  color: #f56c6c;
}

.notification-btn.danger:hover {
  background-color: #fef0f0;
}

@media (max-width: 768px) {
  .notification-actions {
    opacity: 1;
  }
}
</style> 